import { Component } from 'react'
import { defaultProps, defaultState } from '../types/baseType'
interface CommentType {
	id: string
	author: string
	body: string
}
type CommentProps = defaultProps & {
	data: CommentType
}

type State = defaultState & {
	commentList: CommentType[]
}

// 考点1：这里用 PureComponent 无效，因为 props 是对象，每次传值都是不一样的。需要借用 shouldComponentUpdate 做参数比较判断。
class Comment extends Component<CommentProps> {
	shouldComponentUpdate(nextProps: Readonly<CommentProps>): boolean {
		if (nextProps.data.id === this.props.data.id) {
			return false
		}

		return true
	}
	render() {
		const { author, body } = this.props.data
		console.log('Comment 重渲染')
		return (
			<div className="border">
				<p>{author}</p>
				<p>{body}</p>
			</div>
		)
	}
}

export default class CommentList extends Component<defaultProps, State> {
	constructor(props: defaultProps) {
		super(props)
		this.state = {
			commentList: [
				{
					id: '0',
					author: '小明',
					body: '这是小明写的文章',
				},
				{
					id: '1',
					author: '小红',
					body: '这是小红写的文章',
				},
			],
		}
	}

	componentDidMount() {
		setTimeout(() => {
			this.setState({
				commentList: [
					{
						id: '0',
						author: '小黄',
						body: '这是小明写的文章',
					},
					{
						id: '1',
						author: '小红',
						body: '这是小红写的文章',
					},
				],
			})
		})
	}

	// 列表不传 key 控制台会报错。
	render() {
		const { commentList } = this.state
		return (
			<div>
				<h1>CommentList</h1>
				{commentList.map((item) => {
					return <Comment key={item.id} data={item}></Comment>
				})}
			</div>
		)
	}
}
